<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义多选框</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        color: #fff;
    }
    body{
        background: black;
        padding: 50px;
    }
    #app{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .inner {
        display: none;
        width: 20px;
        height: 20px;
        background: #ff6c0d;
    }
    .outer {
        width: 20px;
        height: 20px;
        padding: 8px;
        border: 1px solid #3f3f3f;
    }
    .radio_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

<body>
    <div id="app">
        <div class="radio_box">
            <div class="outer">
                <div class="inner"></div>
            </div>
            <div>单选1</div>
        </div>
        <div class="radio_box">
            <div class="outer">
                <div class="inner"></div>
            </div>
            <div>单选2</div>
        </div>
        <div class="radio_box" id="asd">
            <div class="outer">
                <div class="inner"></div>
            </div>
            <div>单选3</div>
        </div>
    </div>
</body>
<script>
    let inner=document.getElementsByClassName("inner")
    let outer=document.getElementsByClassName("outer")
    let radio=document.getElementsByClassName("radio_box")
    console.log(radio)
    for(let i=0;i<3;i++){
        radio[i].onclick=function(){
        for(let j=0;j<3;j++){
            outer[j].style.borderColor="#3f3f3f";
            inner[j].style.display="none"
        }
        outer[i].style.borderColor="#ff6c0d";
        inner[i].style.display="block"
    }
    }
    
</script>
</html>